<template>
  <div class="sideAside-container">
    <div class="head" v-if="data">
      <Avatar  :url="data?data.avatar:''" />
      <h3>{{data?data.siteTitle:''}}</h3>
    </div>

    <Menu />
    <Contact />
  </div>
</template>

<script>

import Avatar from "../Avatar";
import Menu from "./Menu";
import Contact from "./Contact";

//获取数据仓库中的全局设置
import {mapState} from "vuex";

export default {
  name: "SideAsde",
  components: {
    Menu,
    Contact,
    Avatar,
  },
  computed:{
    ...mapState('setting',['data'])
  }
};
</script>

<style scoped lang='less'>
@import "~@/styles/global.less";
.sideAside-container {
  width: 100%;
  height: 100%;
  padding: 25px 0;
  color: @gray;
  box-sizing: border-box;
  background-color: @dark;
  overflow-x: hidden;
  overflow-y: auto;
  .head {
    img {
      margin: 0 auto;
    }

    h3 {
      text-align: center;
      margin: 10px 0;
    }
  }
}
</style>